<template>
  <div>
    <el-input
      ref="categorySelect"
      v-model="categoryName"
      placeholder="请选择分类"
      @focus="showCategoryDialog"
      prefix-icon="el-icon-search"
      @change="handleChange"
      :disabled="disabled"
      clearable
      @clear="handleClearInput"
    />
    <basic-dialog
      width="60%"
      title="选择商品品类"
      :visible="visible"
      :handle-close="closeCategoryDialog"
      :handleOpen="handleOpen"
      :showFooter="false"
    >
      <div class="category-search">
        <el-form size="mini" ref="formData" :model="formData" inline>
          <el-form-item prop="categoryName" label="名称">
            <el-input
              placeholder="请输入品类名称"
              v-model="formData.categoryName"
              @keyup.enter.native="handleSerach"
            ></el-input>
          </el-form-item>
          <el-form-item prop="categoryNo" label="编码">
            <el-input
              placeholder="请输入四级类编码"
              v-model="formData.categoryNo"
              @keyup.enter.native="handleSerach"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSerach">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider class="divider" content-position="left">条件查询结果：</el-divider>
      <div class="category-searchlist">
        <el-radio-group v-model="searchList.checkedCate" @input="handleCheckSearchList" v-loading="searchLoading">
          <el-radio
            v-for="item in searchList.dataSource"
            :label="item.uuid"
            :key="item.uuid"
          >
          {{ item.fullpath }}&nbsp;&nbsp;{{ item.categoryNo }}
          </el-radio>
        </el-radio-group>
      </div>
    </basic-dialog>
  </div>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import { queryCategoryService } from '@/api/sourcing/public';

export default {
  // 选择主营品类
  name: 'SourcingCategorySelect',
  components: {
    BasicDialog
  },
  props: {
    value: { type: String, },
    brandId: { type: [String, Number] },
    setName: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
  },
  data () {
    return {
      searchLoading: false,
      loading: false,
      visible: false,
      categoryName: '',
      categoryValue: '',
      formData: {
        categoryName: '',
        categoryNo: '',
        brandId: '',
      },
      searchList: { // 查询列表
        dataSource: [], // 数据源
        checkedCate: '', // 勾选对象
      },
    };
  },
  watch: {
    value: {
      handler (val) {
        if (this.setName) {
          this.categoryName = val
        }
      },
      immediate: true,
    },
    brandId: {
      handler (val) {
        this.formData.brandId = val
      },
      immediate: true,
    }
  },
  methods: {
    handleOpen () {
      this.clearCategoryNodes()
    },
    // 清空输入框
    handleClearInput () {
      this.$emit('onSelected', null)
    },
    // 条件查询选择
    handleCheckSearchList (id) {
      const target = this.searchList.dataSource.find(item => item.uuid == id)
      this.categoryName = target?.categoryName
      this.$emit('onSelected', target ?? {})
      this.closeCategoryDialog()
    },
    // 表单-分类名称查询
    async handleSerach () {
      const hasNoCondition = Object.values(this.formData).every(val => !val)
      if (hasNoCondition) return this.$message.warning('品类名称和品类编码不能同时为空')
      const data = { ...this.formData }
      const loadingFn = state => { this.searchLoading = state }
      const res = await queryCategoryService(data, loadingFn)
      if (res?.data) {
        const { data = [] } = res
        this.searchList.checkedCate = ''
        this.searchList.dataSource = data
        if (data.length == 0) {
          this.$message('未查询到结果')
        }
      }
    },
    handleReset () {
      this.$refs.formData.resetFields();
    },
    // 清空已选分类
    clearCategoryNodes () {
      if (this.$refs.formData) {
        this.$refs.formData.resetFields();
      }
      this.searchList = {
        dataSource: [],
        checkedCate: ''
      }
    },
    // 展示弹框
    showCategoryDialog () {
      this.visible = true;
    },
    // 关闭弹框
    closeCategoryDialog () {
      this.visible = false;
    },
    handleChange (val) {
      // 值回显父组件
      this.$emit('input', val);
      // change事件
      this.$emit('change', val);
    }
  }
};
</script>
<style lang="less" scoped>
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
    height: 100%;
  }
  .divider {
    margin: 10px 0;
  }
  .category-searchlist {
    .el-radio-group {
      border: 1px solid #ebeef5;
      padding-left: 5px;
      height: 400px;
      width: 100%;
      max-height: 400px;
      overflow-y: auto;
      label {
        display: block;
        line-height: 24px;
        &:first-child {
          margin-top: 10px;
        }
        &:last-child {
          margin-bottom: 10px;
        }
      }
    }
  }
</style>